<template>
  <div id="About">
    <div class="box">
      <input type="text" placeholder="回车搜索商品" />
    </div>
    <div class="box1">
      <div class="box2">
        <ul >
          <li @click="ap" :class="{active:active==this.id}">所有分类</li>
          <li :class="{active:active==item.id}"  @click="haome(item.id)" v-for="item in fenlei" :key="item.id">{{ item.name }}</li>
        </ul>
      </div>
      <div class="box3">
        <div class="box4">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item><img src="../assets/imgs/6.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="../assets/imgs/7.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="../assets/imgs/8.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="../assets/imgs/9.jpg" alt=""></van-swipe-item>
          </van-swipe>
        </div>
        <div class="box5">
          <div class="box6">
            <ul>
              <li v-for="item in list2" :key="item.id" @click="fen(item.id)">
                <img :src="item.icon" alt="" />
                <p>{{ item.name }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getfenlei } from "../utils/api";
import '../assets/imgs/6.jpg'
export default {
  name: "",
  data() {
    return {
      fenlei: [],
      list: [],
     list2:[],
     list3:[],
     active:"",
     id:this.list

    };
  },
  created() {
    getfenlei().then((res) => {
      this.list = res;
      this.list3=res
      this.list2=res
      res.forEach((item) => {
        if (item.level === 1) {
          this.fenlei.push(item);
        }
      });
    });
  },
  methods: {
    fen(id){
     this.$router.push({
       path:'/fenlei',
       query:{
         id
       }
     })
    },
  ap(){
      this.list2=this.list3
      this.active=this.id
  },
    haome(ind) {
       
        this.list2=[]
       this.list.forEach(item=>{

         if(item.pid==ind){
           this.list2.push(item)
         }
          this.active=ind 
       })
     
    },
   
  },
};
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 40px;
  // background-color: red ;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  input {
    height: 20px;
    font-size: 12px;
    width: 240px;
    border-radius: 30px;
    border: none;
    margin-left: 20px;
    text-indent: 10px;
    background-color: #cccc;
  }
}
.box1 {
  width: 100%;
  height: 600px;
  // background-color: red;
  display: flex;
  .box2 {
    width: 30%;
    height: 100px;
    // background-color: yellowgreen;
    ul {
      width: 100%;
      list-style: none;
      text-align: center;
      li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        // background-color: red;
      }
      //  li:hover{
      //      color: red;
      //      border-left: 2px solid red;
      //    }
      .active{
         color: red;
           border-left: 2px solid red;
      }
    }
  }
  .box3 {
    width: 70%;
  
    // background-color: violet;
    .box4 {
      width: 100%;
      height: 150px;
   .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 150px;
    text-align: center;
    img{
      width: 85%;
      height: 90%;
    border-radius: 5px;
    margin-top: 5px;
    }
   }
    }
    .box5 {
      width: 100%;
     height: 400px;
      .box6 {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        ul {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          li {
            width: 30%;
            height: 25%;
            // background-color: blue;
            text-align: center;
            margin-top: 10px;
            p {
              font-size: 12px;
            }
            img {
              width: 100%;
              height: 80px;
            }
          }
        
        }
      }
    }
  }
}
</style>